$containerWidth: 250px;

.multi-select-container{
  display: inline-block;
  width: $containerWidth;
  min-height: 26px;
  overflow: hidden;
  vertical-align: top;
  background: #fff;
  cursor: text;

  ul.ms-choices{
    overflow: hidden;
    border: 1px solid #aaa;
    border-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;

    &.border{
      box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    }

    li{
      float: left;
      list-style: none;
    }

    li.ms-choice{
      padding: 3px 5px;
      margin: 3px 0 3px 5px;
      font-size: 14px;
      color: #666;
      cursor: default;
      border: 1px solid #aaa;
      border-radius: 3px;
      background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
      box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0,0,0,0.05);
      user-select: none;
      i{
        &:hover{
          color: #464646;
          cursor: pointer;
        }
        display: inline-block;
        font-size: 12px;
        color: #888;
      }
      div{
        display: inline-block;
        color: #333;
      }
    }

    li.ms-search-field{
      input{
        width: 66px;
        box-sizing: border-box;
        outline: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        padding: 0px 14px;
        font-size: 14px;
        background: #fff;
        border: none;
        color: rgba(0, 0, 0, 0.8);
        border-radius: 3px;
        box-shadow: 0em 0em 0em 0em transparent inset;
      }
      input.full{
        width: $containerWidth;
        border: none;
      }
    }

  }

  ul.ms-reslut-container{
    position: absolute;
    margin-top: -1px;
    background: #fff;
    width: $containerWidth;
    max-height: 200px;
    border: 1px solid #aaa;
    border-top: none;
    border-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-user-select: none;

    li{
      width: 100%;
      margin-left: 4px;
      padding: 5px 7px;
      line-height: 26px;
      color: #666;
      box-sizing: border-box;
    }
    li.tip{
      width: 253px;
      margin-left: -3px;
      font-size: 13px;
      background: #f4f4f4;
      cursor: default;
    }
    li.ms-result{
      font-size: 14px;

      &:hover{
        color: #fff;
        background: #3875d7;
        cursor: pointer;
        .user-orgname{
          color: #6ea6ff;
        }
      }
      .user-orgname{
        margin-top: 3px;
        color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}

